<template>
  <view class="box rtl">

    <view class="head  bar-h">
      <view class="view_head">
        <view class="" @click="Back">
          <uv-icon name="arrow-left" size="25"></uv-icon>
        </view>
        <view class="">
          {{ t("Results") }}
          ({{ dataList ? dataList.length : 0 }})
        </view>
        <view class="">
          <!-- <uv-icon name="search" size="38"></uv-icon> -->
        </view>
      </view>
    </view>

    <view class="content" v-if="dataList">
      <view class="" v-if="dataList.length > 0">
        <view class="item" v-for="(item, i) in dataList" @click="getDetails(item.id, i)">
          <view class="num">
            #{{ i }}
          </view>
          <view class="item_box">
            <view class="item_text">
              <view class="info">
                <view class="info_num">
                  <!-- 05546-02220-Linge -->
                  {{ item.oe }}
                </view>
                <view class="info_price">
                  {{ item.productPrice }}SAR
                </view>
              </view>
              <view class="notes">
                <!-- BRACKET ASSY-ENGINE MOUNTING.TUSSAN -->
                {{ item.productName }}
              </view>
            </view>
            <view class="item_btn" v-if="item.quantity > 0">
              <!-- {{item.stock}} -->
              <text>{{ item.quantity }}</text>
            </view>
          </view>

        </view>
      </view>
      <view class="nodata" v-else>
        <image class="img" src="/static/images/cart/noData.png" mode="widthFix"></image>
        <view class="">
          {{ t("No results found") }}
        </view>
      </view>
    </view>
    <view class="" v-if="dataList">
      <view class="footer footer_data" v-if="dataList.length">
        <view class="">
          <view class="tip">
            {{ orderDetailList.length || 0 }} {{ t("itams") }}
            <!-- , {{t("VAT")}}:150.00 SAR -->
          </view>
          <view class="price">
            {{ t("Total") }}:{{ TotalPrice }} SAR
          </view>

        </view>
        <!-- goToView('/pages/shopCart/shopCart') -->
        <view class="Confrm" @click="Checkout">
          {{ t("Check out") }}
          <uv-icon name="arrow-right" color="#fff"></uv-icon>
        </view>
      </view>

      <view class="footer " v-else>
        <view class="title">
          {{ t("OE search") }}
        </view>
        <textarea class="search_box" v-model="search_text" :placeholder="t('searchPl')"
          placeholder-style="font-size:28rpx"></textarea>
        <view class="footer_active">
          <view class="">
            {{ t("back") }}
          </view>
          <view class="Confrm" @click="search_btn">
            {{ t("Search") }}<uv-icon name="arrow-right" color="#fff"></uv-icon>
          </view>
        </view>
      </view>
    </view>


  </view>


  <Model ref="addressModel" :show="false" title="Address&Remark" @Confrm="addressConfrm" modelStyle="minHeight:70%">
    <view class="rtl">
      <view class="address-title">
        <view class="">
          {{ t("Delivery to") }}
        </view>
        <view class="" @click="goToView('/pages/user/addressDeit')">
          <image class="icon_img" src="/static/images/detail.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="address_info">
        <view class="address_img">
          <image class="img" src="/static/log.png" mode="aspectFit"></image>
        </view>
        <view class="address_info_detail">
          <view class="postCode"> {{ addressInfo.StoreName }} </view>
          <view class="address_info_item">
            {{ t("consignee") }}: {{ addressInfo.name }}
          </view>
          <view class="address_info_item"> {{ t("phone") }}:{{ addressInfo.phone }} </view>
          <view class="address_info_item">
            {{ t("address") }}：{{ addressInfo.address }}
          </view>
        </view>
      </view>
      <view class="remark">
        <view class="remark-title">
          {{ t("Remark") }}
        </view>
        <textarea class="remark-text" v-model="remark"></textarea>
      </view>
    </view>
  </Model>

  <Model ref="goodsModel" :title="title" @Confrm="goodsConfrm">
    <view class="" v-if="goodsDetail">
      <swiper v-if="goodsDetail.pic" class="swiper" circular indicator-dots>
        <swiper-item v-for="item in goodsDetail.pic">
          <image :src="item" mode="widthFix"></image>
        </swiper-item>
      </swiper>
      <view class="p_name">
        <view class="img">
        </view>
        <view class="">
          <view class="">
            {{ goodsDetail.productName }}
          </view>
          <view class="good-year">
            {{ goodsDetail.year }}
          </view>
        </view>
      </view>
      <view class="goods-num">
        <view class="goods-sum" @click="() => { num > 1 ? num-- : '' }">
          -
        </view>
        <view class="input">
          {{ num }}
        </view>
        <view class="goods-sum" @click="() => { num < goodsDetail.stock ? num++ : '' }">
          +
        </view>
      </view>

    </view>
  </Model>

  <shopCartPlace ref="CartPlace" />
</template>

<script setup>
import Model from "@/components/Model/Model.vue"
import shopCartPlace from "@/components/shopCartView/shopCartPlace.vue"
import {
  ref,
  onMounted
} from "vue"
import {
  useI18n
} from "vue-i18n";
import {
  UserAPI,
  HomeAPI,
  CartAPI,
  OrderAPI
} from "@/api/index";
import {
  useAuthStore,
  useDeviceStore
} from "@/store";
import {
  onShow
} from "@dcloudio/uni-app"
const deviceStore = useDeviceStore()
const {
  t
} = useI18n()
const goodsModel = ref()
const addressModel = ref()
const CartPlace = ref()

const Back = () => {
  uni.navigateBack()
}
const listForOe = ref([])
const dataList = ref(null)
const goodsDetail = ref(null)
const goodsIndex = ref(-1)
const num = ref(1)
const title = ref()
const search_text = ref("")
const remark = ref("")
const orderDetailList = ref([])
const TotalPrice = ref(0)
const addressInfo = ref({})

const search_btn = () => {
  listForOe.value = search_text.value ? search_text.value.split("\n") : [];
  query()
}
const addressConfrm = async () => {
  addressModel.value.control(false)
  let res = await OrderAPI.postPlaceOrder({
    "shopId": deviceStore.MyShop.id,
    "paymentMethod": deviceStore.MyShop.paymentMethod, // 0现结 1账期
    "orderType": "0", //0->正常订单；1->促销订单
    "remark": remark.value, //备注
    "orderDetailList": orderDetailList.value,
    //  [{
    // 	"oe": "", //oe号
    // 	"quantity": 1 //商品个数
    // }],
    "orderReceiverAddressDto": {
      "receiverName": addressInfo.value.name, //收货人姓名
      "receiverPhone": addressInfo.value.phone, //收货人电话
      // "receiverProvince": "省份/直辖市", //省份/直辖市
      // "receiverCity": "城市", //城市
      // "receiverRegion": "区", //区
      "receiverDetailAddress": addressInfo.value.address //详细地址
    }
  })
  console.log(res)
  CartPlace.value.control(true)
}

const goodsConfrm = async () => {
  orderDetailList.value.push({
    "oe": goodsDetail.value.oe,
    "quantity": num.value
  })
  countTotalPrice()
  num.value = 1;
  goodsModel.value.control(false)

}
const countTotalPrice = () => {
  const item = dataList.value[goodsIndex.value]
  item.quantity = num.value;
  console.log(Number(TotalPrice.value), (item.productPrice * num.value))
  TotalPrice.value = (Number(TotalPrice.value) + (item.productPrice * num.value)).toFixed(2)
}
const Checkout = () => {
  if (orderDetailList.value.length > 0) {
    addressModel.value.control(true)
  }
}
const getDetails = async (id, index) => {
  goodsIndex.value = index;
  let res = await CartAPI.getDetails(id);
  console.log(goodsModel.value)
  title.value = res.oe
  goodsModel.value.control(true)
  goodsDetail.value = res
  console.log(res)
}

const query = async () => {
  let myshop = deviceStore.MyShop;
  try {
    let res = await HomeAPI.getHomeSearch({
      "carMake": 1,
      "listForOe": listForOe.value,
      "shopId": myshop.id
    })
    res.items.forEach(item => {
      // console.log()
      item.quantity = 0
    })
    // dataList.value = []
    // dataList.value.push(...res)
    // console.log(res)
    dataList.value = res.items
  } catch (e) {
    console.log(e)
  }

}
const goToView = (path) => {
  uni.navigateTo({
    url: path
  })
}
onShow(() => {
  let address = uni.getStorageSync("address");
  if (address) {
    addressInfo.value = address;
  }
})

onMounted(() => {
  let res = uni.getStorageSync("search")
  listForOe.value = res ? res.split("\n") : []
  query()
})
</script>

<style lang="scss" scoped>
@import "@/static/css/index.scss";

.address-title {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 20rpx;


  .icon_img {
    width: 40rpx;
  }
}

.remark {
  padding: 0rpx 0 20rpx;

  .remark-title {
    width: 90%;
    margin: 0 auto;
    padding: 10rpx 0;
    font-size: 28rpx;

  }

  .remark-text {
    border: 1px solid #cccccc;
    border-radius: 10rpx;
    width: 90%;
    margin: 0 auto;
    padding: 10rpx;
  }
}

.address_info {
  display: flex;

  .address_img {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;

    .img {
      max-width: 100%;
      max-height: 100%;
    }
  }

  .address_info_detail {
    flex: 1;
    font-size: 24rpx;

    .postCode {
      padding: 5rpx 10rpx;
      border-radius: 5rpx;
      background: $primary-b;
      color: #fff;
      width: fit-content;
      margin-bottom: 20rpx;
    }

    .address_info_item {
      margin-bottom: 10rpx;
    }
  }
}

.goods-num {
  display: flex;
  align-items: center;
  // border: 1px solid #ccc;
  border-radius: 10rpx;
  width: 300rpx;
  text-align: center;
  margin: 20rpx auto;

  .input {
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    width: 40%;
    height: 80rpx;
    line-height: 80rpx;

  }

  .goods-sum {
    border: 1px solid #ccc;
    width: 30%;
    height: 80rpx;
    line-height: 80rpx;

    border-radius: 0 10rpx 10rpx 0;
  }

  .goods-sum:nth-child(1) {
    border-radius: 10rpx 0 0 10rpx;
  }

}

.swiper {
  padding: 10rpx;

  image {
    width: 100%;
  }
}

.box {
  height: 100%;
  display: flex;
  flex-direction: column;

}

.head {
  background: #fff;
  border-radius: 0 0 20rpx 20rpx;

  .view_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 20rpx 20rpx;
    padding: 20rpx 20rpx;
  }

  .head_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 20rpx;

    .select_item {
      width: 45%;
      border: 1px solid #fff;
      border-radius: 10rpx;
      padding: 5rpx 10rpx;
      color: #fff;
      position: relative;

      .select_icon {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 0 15rpx;

  .nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 120rpx;

    .img {
      width: 200rpx;
      padding-bottom: 20rpx;
    }
  }

  .item {
    margin-bottom: 20rpx;

    .num {
      color: #7f7f7f;
      font-size: 24rpx;
      margin-left: 5rpx;
    }

    .item_box {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx;

      .item_text {
        flex: 1;

        .info {
          display: flex;
          align-items: center;

          .info_num {
            font-size: 32rpx;
          }

          .info_price {
            color: #E57854;
            font-size: 24rpx;
            margin-left: 15rpx;
          }
        }

        .notes {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: #dddddd;
        }
      }

      .item_btn {
        width: 100rpx;
        background: $primary-b;
        height: 50rpx;
        border-radius: 10rpx;
        color: #fff;
        text-align: center;
        line-height: 50rpx;
      }
    }
  }
}

.footer {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;

  .title {
    text-align: center;
    padding: 20rpx 0;
  }

  .search_box {
    border: 1px solid #ccc;
    border-radius: 10rpx;
    margin: 20rpx;
    width: calc(100% - 40rpx);
    min-height: 500rpx;
    padding: 20rpx;
    box-sizing: border-box;

  }

  .footer_active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    background: #127B56;
    color: #fff;
    border-radius: 10rpx 10rpx 0 0;
    font-size: 28rpx;

    .Confrm {
      display: flex;
      align-items: center;
    }

    .tip {
      font-size: 24rpx;
      color: #dddddd;
    }
  }

}

.footer_data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  background: #127B56;
  color: #fff;
  border-radius: 10rpx 10rpx 0 0;
  font-size: 28rpx;

  .Confrm {
    display: flex;
    align-items: center;
  }

  .tip {
    font-size: 24rpx;
    color: #dddddd;
  }
}

.p_name {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10rpx;
  display: flex;

  .img {
    width: 30%;
  }

  .good-year {
    color: #a6a6a6;
  }
}
</style>